<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>产品详情</title>
<link rel="stylesheet" href="static/new/swiper-bundle.min.css">

  <script src="static/jquery.min.js"></script>

  <link rel="stylesheet" href="static/muse-ui.css">
  <link rel="stylesheet" href="static/register.css">
  <link rel="stylesheet" href="static/indu.css">
  <script src="static/layer/layer.js" type="text/javascript"></script>

  <script src="static/vue.js"></script>
  <script src="static/muse-ui.js"></script>
  <script src="js/axios.js"></script>
  <script src="static/smsCode.js"></script>
<link rel="stylesheet" href="static/css/bootstrap.min.css">

<!-- <script src="static/js/main.js"></script> -->
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/hammer.js"></script>

<!-- <script type="text/javascript">
  Vue.use(window.VueAwesomeSwiper)
</script> -->
  <style type="text/css">


   .banner img{
     width: 100%;
   }
   .info-title{
     color:#141010;
     text-align: center;
     font-weight: bold;
     font-size: 16px;
     padding-top: 10px;
   }
   .info-img{
     display: flex;
     flex-direction: column;
   }
   .info-img img{
     width: 100%;
     height: 100%;
   }
   .info-right img{
width: 10px;
    height: 16px;
        vertical-align: sub;
   }
   .info-bottom{
  
    box-shadow: 0px 1px 20px 1px #E4E4E4;
    padding: 10px 0;
    /* margin: 20px 0; */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    font-weight: bold;
   }
   .info-wrapper{
  display: flex;
    flex-direction: row;
    justify-items: center;
    justify-content: space-around;
    padding: 3px 0;
   }
   .info-right{
     color: #004299;
   }
   .info{
     padding-bottom: 100px;
         background-color: #fff
   }
   .swiper-container1 {
    width: 100%;
}  
.info-title-m{
  font-size: 16px;
  font-weight: bold;
  padding: 0px 20px;
}
.info-main{
  padding: 10px 20px;
color: #86868B;
line-height: 22px;
}
.info-left{
  width: 70%;
}
  </style>
    <style type="text/css">
      .sms-code {
        position: relative;
        width: 100%;
      }
    
      .indu {
        background-color: #FAFAFA;
      }
    
      .indu-wapper {
        display: flex;
        flex-direction: column;
      }
    
      .indu-left img {
        width: 90px;
        height: 90px;
        border-radius: 3px;
      }
    
      .indu-item {
        display: flex;
        flex-direction: row;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 17px 14px 5px 14px;
        margin: 11px 11px 0 11px;
    
        box-shadow: 0px 2px 8px 0px #DDDFEB;
      }
    
      .indu-right {
        padding: 0 9px 8px 15px;
        width: 100%;
      }
    
      .indu-title {
        font-size: 15px;
        color: #30344C;
        font-weight: bold;
        margin-bottom: 5px;
    
      }
    
      .indu-text {
    
        color: #86868B;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 12px;
      }
    
      .indu-but {
        margin: 0 0 0 auto;
        width: 78px;
        height: 30px;
        background: #004299;
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        color: #ffffff;
        margin-top: 10px;
      }
    
      .pop-alter {
        background-color: #ffffff;
        margin: 0 15px;
        height: 490px;
        width: 100%;
        z-index: 99;
        border-radius: 10px;
      }
    
      .pop {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 600px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
            z-index: 999;
      }
    
      .pop-title {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #30344C;
        border-radius: 10px;
        margin-top: 25px;
      }
    
      .mu-form-item .mu-input {
        background-color: rgba(187, 187, 187, 0.1);
        font-size: 12px;
        padding: 5px;
        border-radius: 3px;
      }
    
      .mu-form-item {
        margin-bottom: 0;
      }
    
      .mu-input-line {
        display: none;
      }
    
      .pop-but {
        width: 241px;
        height: 38px;
        background: #004299;
        border-radius: 20px;
        text-align: center;
        line-height: 38px;
        font-size: 16px;
        color: #ffffff;
        margin-top: 10px;
        margin: auto;
      }
    
      .pop-bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
            z-index: 999;
      }
    
      .cuo img {
        width: 21px;
        height: 21px;
        position: fixed;
        top: 80px;
        z-index: 999;
        right: 35px;
      }
      .info-text img{
        width: 100%;
        height: 100%;
      }
      .swiper-pagination{
        position:inherit;
      }
      .carousel-indicators .active{
        background-color: #004299;
      }
      .mu-form-item-help{
            bottom: 1px;
      }
    </style>

</head>


<body>
  <div class="regist" id="app">
  <div class="banner">
  <!-- <div class="swiper-container1">
    <div class="swiper-wrapper" v-if="detail.images">
      <div class="swiper-slide" v-for="(item,index) in detail.images" >
        <img :src=`${url}${item}` alt="">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div> -->
<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" v-for="(item, index) in detail.images" :data-slide-to="index"
      :class="{'active': activeIndex === index}"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item" :class="{'active': activeIndex === index}" v-for="(item, index) in detail.images">
      <img :src=`${url}${item}` alt="">
    </div>
  </div>
</div>

  </div>
  <div class="info">
    <div class="info-title">产品详情</div>
    <!-- <div class="info-title-m">{{detail.title}}</div>
    <div class="info-main">{{detail.describes}}</div>
    <div class="info-img" v-for="(item,index) in detail.images">
      <img :src=`${url}${item}`>
    </div> -->
    <div class="info-text" v-html='detail.details'></div>
  </div>
  <div class="info-bottom">
    <div class="info-wrapper" v-for="(item,index) in detail.enclosures">
      <div class="info-left">{{item.name}}</div>
      <div class="info-right" @click="hanldOpen()" v-if="state==false">查看详情
        <img src="static/right.png" />
      </div>
      <div class="info-right" @click="hanldok(item.url)" v-else>查看详情
        <img src="static/right.png" />
      </div>
    </div>
    
  </div>

      <div class="pop-bg" v-show="pop"></div>
      
      <div class="pop" v-show="pop">
        <div class="cuo" @click="hanldClose()">
          <img src="static/cuo.png" />
        </div>
        <div class="pop-alter">
          <div class="pop-title">免费查看详情</div>
          <div class="pop-input-bg">
            <mu-form ref="form" :model="validateForm" class="regist-content">
              <mu-form-item  prop="name" :rules="nameRules">
                <mu-text-field v-model="validateForm.name"  placeholder="请输入您的姓名（必填）"></mu-text-field>
              </mu-form-item>
              <mu-form-item  prop="company" :rules="companyRules">
                <mu-text-field v-model="validateForm.company" placeholder="请输入公司名称（必填）"></mu-text-field>
              </mu-form-item>
              <mu-form-item prop="telphone" :rules="mobileRules">
                <mu-text-field v-model="validateForm.telphone" prop="mobile" placeholder="请输入您的电话（必填）"></mu-text-field>
              </mu-form-item>
              <mu-form-item prop="smscode" :rules="smscodeRules">
                <div class="sms-code">
                  <mu-text-field type="tel" placeholder="验证码" v-model="validateForm.smscode" fullWidth />
                  <mu-button flat color="#004299" style="white-space: nowrap;" @click="getCode" :disabled="canSend">
                    {{codeMsg}}
                  </mu-button>
                </div>
              </mu-form-item>
              <mu-text-field v-model="validateForm.message" placeholder="请输入留言内容，我们会尽块与您联系（选填）" multi-line :rows="6" :rows-max="6"
                style="background-color: rgba(187, 187, 187, 0.1);font-size:12px;width: 100%;padding: 5px;border-radius: 3px;">
              </mu-text-field>
            </mu-form>
            <div class="pop-but" @click="regist()">确认</div>
          </div>
        </div>
      </div>

  </div>
  <script src="./static/jigsaw.min.js" type="text/javascript"></script>
  <script>
    Vue.use(MuseUI)
    var url = 'http://saibocp.cyber-mi.com/'
    var regist = new Vue({
      el: '#app',
      methods: {
        //获取地址栏参数，name:参数名称
     getUrlParms(name) {
       that = this;
      let url = window.location.href;//获取请求进来的完整url
      let tstr = url.substring(url.indexOf('?') + 1).split('&');//先截取url的?后面的参数部分，在根据&分割成参数数组
     
      let result = {};
      tstr.forEach((item) => {
        let res = item.split('=');//res为type,my-component1.vue。  res[0]为type，res[1为]my-component1.vue
        result[res[0]] = res[1];//构造成键值对形式 res[0]为键，res[1]为值 例：type: "my-component1.vue" 
        that.id = result[res[0]]
      })
            return result[name];//通过键取值
    },
//获取产品详情
        product_detail: function () {
          let app = this;
          $.ajax({
            url: `${app.url}other/product_detail`,
            dataType: 'json',
            type: 'GET',
            data: {
              id: app.id,
            },
            success: function (r) {
              if (r.code==0) {
                app.detail = r.data;
                console.log(app.detail)

            
            
              } else {
                layer.msg(r.msg);
              }
            }
          })
        },
         hanldClose() {
          this.pop = false;
        },
        hanldOpen() {
          this.pop = true;
        },
        // 手机验证码
        getCode() {
          let app = this;
          const formData = {
            mobile: app.validateForm.telphone,
          }
          if (!(/^[1][3-9][0-9]{9}$/.test(app.validateForm.telphone))) {
            alert("请输入正确的手机号！");
            return
          } else {
            //发送短信
            // axios.post(`${app.url}/other/sendMns`, data).then(res => {
            //   alert(res.data.msg)
            // })
              $.ajax({
              url: `${app.url}other/sendMns`,
              dataType: 'json',
              type: 'POST',
              data: {
                mobile: app.validateForm.telphone,
              },
              success: function (r) {
                if (r.code == 0) {
                  console.log(r)
                   layer.msg(r.msg);
                } else {
                  layer.msg(r.msg);
                }
              }
            })
          }

          this.canSend = true;
          this.startTime = new Date().getTime();
          localStorage.setItem('SMSCodeStratTime', this.startTime);
          this.sending();
        },
        sending() {
          //验证码倒计时
          let app = this;
          let now = new Date().getTime();
          let time = Math.round((now - app.startTime) / 1000);
          app.codeMsg = `稍等${app.time - time}秒`
          if (time >= app.time) {
            app.canSend = false;
            app.startTime = null;
            app.timer = null;
            app.codeMsg = `获取验证码`
            localStorage.removeItem('SMSCodeStratTime')
          } else {
            app.timer = setTimeout(function () {
              app.sending();
            }, 1000)
          }
        },
        hanldok(url){
          let that = this;
           window.open(`${that.url}${url}`);
        },

        //注册
        regist: function () {
          let app = this;
          $.ajax({
             url: `${app.url}other/froms`,
            dataType: 'json',
            type: 'POST',
            data: {
              product:app.id,//产品id
              name: app.validateForm.name,//用户名
              telphone: app.validateForm.telphone,//电话号码
              code: app.validateForm.smscode,//验证码
              company: app.validateForm.company,//公司
              message:app.validateForm.message,//备注
            },
            success: function (r) {
              if (r.code==0) {
                layer.msg(r.msg);
                app.pop = false;
                localStorage.setItem('state', true);
                app.state = true;
              } else {
                layer.msg(r.msg);
              }
            }
          })
        },
        toggle: function (todo) {
          todo.done = !todo.done
        }
      },
      data: function () {
        return {
          carousel: [
            { text: "Learn JavaScript" },
            { text: "Learn Vue" },
            { text: "Play around in JSFiddle" },
            { text: "Build something awesome" }
          ],
           activeIndex: 0,
          state:false,//查看状态
          detail:"",
          url:'http://saibocp.cyber-mi.com/',
          id:"",
          openURL:"",
          pop: false,
          show: false,
          opens: false,
          codeMsg: '获取验证码',
          canSend: false,
          timer: null,
          startTime: null,
          time: 60, //倒计时60秒
          validateForm: {            
            name: "",//用户名
            telphone:"",//电话号码
            password:"",
            smscode:"",//验证码
            company: "",//公司
            message: "",//备注
          },
          mobileRules: [
            { validate: val => !!val, message: "请输入手机号码" },
            {
              validate: val => /^[1][3-9][0-9]{9}$/.test(val),
              message: "请输入正确的手机号码"
            }
          ],
          // passwordRules: [
          //   { validate: val => !!val, message: "请输入登录密码" },
          //   {
          //     validate: val => val.length >= 6 && val.length <= 20,
          //     message: "登录密码长度大于等于6小于等于20"
          //   }
          // ],
          // tradeRules: [
          //   { validate: val => !!val, message: "请输入交易密码" },
          //   {
          //     validate: val => /^[0-9]{6}$/.test(val),
          //     message: "交易密码为6位数字"
          //   }
          //   //	        {
          //   //	          validate: val => val.length == 6 ,
          //   //	          message: "交易密码长度等于6"
          //   //	        }
          // ],
          smscodeRules: [{ validate: val => !!val, message: "请输入验证码" }],
          nameRules: [{ validate: val => !!val, message: "请输入姓名" }],
          companyRules: [{ validate: val => !!val, message: "请输入公司名称" }]


          // invitecodeRules: [{ validate: val => !!val, message: "请输入邀请码" }],
        }
      },
   
       mounted() {
       
      },
      created() {
        let app = this;
         this.getUrlParms();//调用函数即可
         this.product_detail()
          let state = localStorage.getItem('state');
         if(state){
           app.state = state;
           console.log('缓存中读取'+ app.state)
         }
        let search = window.location.search
        search = search.substr(1, search.length - 1);
        let id = search.split('=')[1];
        if (id) {
          this.validateForm.invitecode = id;
        }
      },
      

    });

  </script>
</body>
<script src="static/new/swiper-bundle.min.js"></script>

    <script>
  $('#myCarousel').carousel({
    interval: 3000
  })

      window.onload = function () {
    var swiper = new Swiper('.swiper-container1', {
      spaceBetween: 30,
      centeredSlides: true,
      observer: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }
  </script>
</html>